<template>
  <el-main>
    <div>
      <el-form :model="form" :inline="true" label-width="80px">
        <el-form-item label="项目名称:" style="float: left">
          <el-input style="width: 90%;margin-top: 0vh;" v-model="projectName"></el-input>
        </el-form-item>
        <el-form-item label="项目类型:" style="float: left">
          <el-select v-model="type" disabled="disabled" @change="typeChange" clearable="true"  placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
          ~
          
          <el-form-item label="项目类别:" style="float: left">
          <el-select v-model="category" clearable="true" placeholder="请选择">
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--查询按钮-->

        <el-button type="primary" @click="addCreate()" style="float: right;margin-right: 1vh;;">新建</el-button>
        <el-button type="primary" @click="findPage()" style="float: right;margin-right: 2vh;">查询</el-button>
      </el-form>
    </div>
    <!--新建项目-->
    <br/><br/>
    <!--项目内容-->
    <el-table size="small" current-row-key="id" height="700" :data="dataList" style="margin-top: 5px">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <!-- <el-table-column v-for="item in list" :key="item.prop" :prop="item.prop" :label="item.label"
                       align="center"></el-table-column> -->

      <el-table-column prop="project_name" label="项目名称"></el-table-column>
 
            
      <el-table-column label="项目类型">
        <template slot-scope="scope">
          <el-select disabled="disabled" v-model="scope.row.type" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      
  
      
 
      <el-table-column label="项目类别">
        <template slot-scope="scope">
          <el-select disabled="disabled" v-model="scope.row.category" placeholder="请选择">
            <el-option
              v-for="item in categoryTableOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>

            
      <el-table-column prop="project_description" label="项目描述"></el-table-column>


      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editDom(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="projectDetail(scope.row)">详情</el-button>
          <el-button type="danger" size="mini" @click="deleteProject(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <!-- 新增标签弹框 -->
    <div class="add-form">
      <el-dialog title="新建项目" :visible.sync="dialogVisible">
        <el-form ref="dataAddForm" style="" :model="formData" :rules="rules" label-position="left" label-width="100px">
          <el-row style="padding: 2vh;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="项目名称：" prop="project_name">
                  <el-input v-model="formData.project_name" placeholder="请输入项目名称 "/>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="项目描述：" prop="project_description">
                  <el-input v-model="formData.project_description" placeholder="请输入项目描述 "/>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="项目类型：" style="text-align: left;" prop="type">
                  <el-select v-model="formData.type" disabled="disabled" @change="typeChange2" placeholder="请选择项目类型">
                    <el-option label="经济性分析" value="1"></el-option>
                    <el-option label="规划设计" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          
              <el-col :span="8">
                <el-form-item  style="text-align: left;" prop="category" label="项目类别：">
                  <el-select v-model="formData.category" placeholder="请选择">
                    <el-option
                      v-for="item in categoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            

            </el-row>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add()">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑标签弹框 -->
    <div class="add-form">
      <el-dialog title="编辑项目" :visible.sync="dialogFormVisible4Edit">
        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row style="padding: 2vh;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="项目名称：" prop="project_name">
                  <el-input v-model="formData.project_name" placeholder="请输入项目名称 "/>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="项目描述：" prop="project_description">
                  <el-input v-model="formData.project_description" placeholder="请输入项目描述 "/>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="项目类型：" style="text-align: left;" prop="type">
                  <el-select v-model="formData.type"  disabled="disabled"   @change="typeChange2" placeholder="请选择项目类型">
                    <el-option label="经济性分析" value="1"></el-option>
                    <el-option label="规划设计" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col> 
          
              <el-col :span="8">
                <el-form-item  style="text-align: left;" prop="category" label="项目类别：">
                  <el-select v-model="formData.category"  disabled="disabled"  placeholder="请选择">
                    <el-option
                      v-for="item in categoryTableOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>


            </el-row>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
          <el-button type="primary" @click="edit()">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-main>
</template>
<script>
  export default {
    name: 'project',
    created() {
      this.findPage();//初始化后完成分页查询
    },
    data() {
      return {
        selectItem: 'project',
        pagination: {//分页相关模型数据
          currentPage: 1,//当前页码
          pageSize: 10,//每页显示的记录数
          total: 100,//总记录数
          queryString: null//查询条件
        },
        list: [{
          label: '项目名称',
          prop: "project_name"
        }, {
          label: '项目类型',
          prop: "type"
        }, {
          label: '项目描述',
          prop: "category"
        }, {
          label: '创建时间',
          prop: "created_time"
        }],
        dialogVisible: false,
        dialogFormVisible4Edit: false,
        project: [],
        value: "",
 
        endtime: "",
        dataList: [],
        typeOptions:[
          {value:"1",label:"经济性分析"},
          {value:"2",label:"规划设计"},
        ],
        categoryOptions:[
          {value:"4",label:"制(储)氢系统规划设计"},
          {value:"5",label:"输氢系统规划设计"},
          {value:"6",label:"氢能综合供能场景规划设计"},
          {value:"7",label:"综合能源系统规划设计"}, 
        ],
          categoryTableOptions:[
            {value:"1",label:"制氢环节"},
            {value:"2",label:"输氢环节"},
            {value:"3",label:"用氢环节"}, 
            {value:"4",label:"制(储)氢系统规划设计"},
            {value:"5",label:"输氢系统规划设计"},
            {value:"6",label:"氢能综合供能场景规划设计"},
            {value:"7",label:"综合能源系统规划设计"}, 
        ], 
        formData: {
          type:"2",
          category:"",
          project_name:"",
          project_description:"",

        },
        rules:{
          project_name:[{required:true,message:"请输入项目名称",trigger:"blur"}],
          type:[{required:true,message:"请选择项目类型",trigger:"blur"}],
          category:[{required:true,message:"请选择项目类别",trigger:"blur"}],
        },
        type:"2",
        projectName:"",
        category:"",
      }
    },
    methods: {

      
       projectDetail:function(row){

        var type = row.type;
        var category = row.category;
        var projectName = row.project_name;

        var sourceProjectPageName = "designProjectMaintenance";

        var pageName = "";
        if(type=="1"){
          if(category=="1"){
            pageName = "hpEconomicAnalysis";
          }else if(category=="2"){
            pageName = "htEconomicAnalysis";
          }else if(category=="3"){
            pageName = "huEconomicAnalysis";
          }
          this.$router.push({path:'/economicAnalysis',query:{"projectId":row.id,"pageName":pageName,"projectName":projectName,"type":type,"category":category,"sourceProjectPageName":sourceProjectPageName}})

        }else if(type=="2"){
          if(category=="4"){
            pageName = "elecWaterPlanDesign";
          }else if(category=="5"){
            pageName = "hydrogenTransmissionPlanDesign";
          }else if(category=="6"){
            pageName = "hydrogenEnergyPlanDesign";
          }else if(category=="7"){
            pageName = "integratedEnergyPlanDesign";
          }
          this.$router.push({path:'/planAndDesign',query:{"projectId":row.id,"pageName":pageName,"projectName":projectName,"type":type,"category":category,"sourceProjectPageName":sourceProjectPageName}})
        }
        


      },

      typeChange:function(){

        var type = this.type;
        this.category = "";
        if(type=="1"){
          this.categoryOptions = [
            {value:"1",label:"制氢环节"},
            {value:"2",label:"输氢环节"},
            {value:"3",label:"用氢环节"}, 
          ];
        }else {
          this.categoryOptions = [
            {value:"4",label:"制(储)氢系统规划设计"},
            {value:"5",label:"氢能综合供能场景"},
            {value:"6",label:"综合能源系统"}, 
          ];
        }

      },
            
      typeChange2 : function(){

        var type = this.formData.type;
       
        if(type=="1"){
          this.categoryOptions = [
            {value:"1",label:"制氢环节"},
            {value:"2",label:"输氢环节"},
            {value:"3",label:"用氢环节"}, 
          ];
        }else {
          this.categoryOptions = [
            {value:"4",label:"制(储)氢系统规划设计"},
            {value:"5",label:"氢能综合供能场景"},
            {value:"6",label:"综合能源系统"}, 
          ];
        }

        this.formData.category = "";


      },

      clickProject(id) {
        if (this.selectItem === id) {
          return
        }
        this.selectItem = id
      },
      //新建项目
      add() {
        this.$refs['dataAddForm'].validate((valid) => {
          if (valid) {
            this.$http.post("/iepsapi/project/add", this.formData).then((res) => {
              this.dialogVisible = false;
              if (res.data.flag) {
                this.$message({
                  type: 'success',
                  message: res.data.message
                });
              } else {
                this.$message.error(res.data.message);
              }
            }).finally(() => {
              //重新进行分页查询
              this.findPage();
            });
          }
        })
      },
      //分页查询
      findPage() {
        //alert(this.va)
        
        var param = {
          category: this.category,
          type: this.type,
          projectName : this.projectName
        };
 
        this.$http.post("/iepsapi/project/findPage", param).then((res) => {
          ;
          this.dataList = res.data.data;
        })
      },
      //切换页码
      handleCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this.findPage();
      },
      //重置表单数据
      resetForm() {
        this.formData = {
          type:"2",
          category:"",
          project_name:"",
          project_description:"",
        };
      },
      // 弹出添加窗口
      addCreate() {
        this.dialogVisible = true;
        this.resetForm();
      },
      //删除项目
      deleteProject(row) {
        var category = row.category;
        // alert(row.id)
        this.$confirm("你确定要删除当前数据吗？", "提示", {
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮，发送ajax请求
          this.$http.get("/iepsapi/project/deleteProject?id=" + row.id+"&category="+category).then((res) => {
            if (res.data.flag) {
              this.$message({
                type: 'success',
                message: res.data.message
              });
              //重新查询
              this.findPage();
            } else {
              //执行失败
              this.$message.error(res.data.message);
            }
          }).catch((r) => {
            this.showMessage(r);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '操作已取消'
          });
        });
      },
      // 弹出编辑窗口
      editDom(row) {
        this.dialogFormVisible4Edit = true;
        // alert(row.id);
        this.$http.get("/iepsapi/project/findById?id=" + row.id).then((res) => {
          if (res.data.flag) {
            //进行回显
            this.formData = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      //编辑项目
      edit() {
        this.$refs['dataEditForm'].validate((valid) => {
          if (valid) {
            this.$http.post("/iepsapi/project/edit", this.formData).then((res) => {
              if (res.data.flag) {
                this.$message({
                  type: 'success',
                  message: res.data.message
                });
              } else {
                this.$message.error(res.data.message);
              }
            }).finally(() => {
              //不管成功还是失败，都进行分页查询
              this.findPage();
              //隐藏编辑窗口
              this.dialogFormVisible4Edit = false;
            });
          } else {
            //表单校验不通过
            this.$message.error("表单数据校验失败!");
            return false;
          }
        });
      }
    }
  }
</script>
<style scoped>

  /deep/ .el-input.is-disabled .el-input__inner {
      background-color: #14265d;
      border-color: #E4E7ED;
      color: #C0C4CC;
      cursor: not-allowed;
  }

  .button-text {
    font-size: 12px;
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    margin-bottom: 10px;
  }

  /deep/ .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #ffffff;
      line-height: 40px;
      padding: 0 12px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
    
  /deep/ .el-dialog__body {
      padding: 0px 0px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
      background: #29377C;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__footer {
    padding: 10px 20px 20px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #29377C;
  }

</style>

